<!doctype html>
<html>
  <head>
    <title>ADK MCP App</title>
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  </head>

  <body>
    <div class="tab-nav">
      <button class="tab-button active" data-tab="app-tab-content">
        Chatbot
      </button>
      <button class="tab-button" data-tab="user-guide-tab-content">
        User Guide
      </button>
    </div>

    <div class="tab-content">
      <div id="app-tab-content" class="tab-panel active">
        <div class="app-container">
          <div class="header-container">
            <img
              src="https://google.github.io/adk-docs/assets/agent-development-kit.png"
              alt="ADK Logo"
              class="logo"
              title="Agent Development Kit" />
            <h1>ADK Multi-Agent Integrated with MCP</h1>
          </div>
          <div id="messages"></div>
          <form id="message-form">
            <input
              type="text"
              id="message"
              name="message"
              placeholder="Type your message..."
              autocomplete="off" />
            <button type="submit" id="send-button" disabled>Send</button>
          </form>
        </div>
      </div>

      <div id="user-guide-tab-content" class="tab-panel">
        <div id="user-guide-markdown-content"></div>
      </div>
    </div>

    <script type="module" src="main.js"></script>
  </body>
</html>
